<template>
  <view class="noticeListMain">
    <view class="noticeListBox">
      <view v-if="list.length > 0">
        <view
          class="noticeListItem"
          v-for="(item, index) in list"
          :key="index"
          @tap="detailTap(item)"
        >
          <view class="time">
            <text>{{ item.send_time }}</text>
          </view>
          <view class="itemBox">
            <view class="title ellipsis1 flex align-center justify-between">
              <view>{{ item.business_type }}</view>
              <text class="readed" v-if="item.cnts == 1">已读</text>
              <text class="unread" v-else>未读</text>
            </view>
            <view class="brief ellipsis1">{{ item.title }}</view>
            <view
              class="viewDetail flex align-center justify-between solid-top"
            >
              <text>点击查看</text>
              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view
        class="noMachine flex align-center"
        v-if="list.length == 0 && isLoad"
      >
        <image
          src="../../static/images/noData/zwjl.png"
          mode="widthFix"
        ></image>
        <text>暂无记录</text>
      </view>
    </view>
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      v-if="list.length > 0"
      style="padding-bottom: 80rpx"
    />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageNumber: 10,
      list: [],
      status: "loadmore",
      noMore: false,
      isLoad: false,
    };
  },
  onShow() {
    this.page = 1;
    this.pageNumber = 10;
    this.list = [];
    this.status = "loadmore";
    this.noMore = false;
    this.isLoad = false;
    this.messageList();
  },
  onReachBottom(){
     if (this.noMore) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.page = ++this.page;
      this.messageList();
    }
  },
  onPullDownRefresh(){
    this.page = 1;
    this.list = [];
    this.status = "loadmore";
    this.noMore = false;
    this.isLoad = false;
    this.messageList();
  },
  // 点击下载更多
  loadmore() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.page = ++this.page;
      this.status = "loadmore";
      this.messageList();
    }
  },
  methods: {
    messageList() {
      this.$u.api
        .messageList({
          page: this.page,
          limit: this.pageNumber,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.list = this.list.concat(datas);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
              duration: 1200,
            });
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    readMessage(id) {
      
      this.$u.api.readMessage({
        
        message_id: id,
      });
    },
    detailTap(item) {
      this.readMessage(item.id);
      if (item.open_type == "html") {
        this.$u.route({
          url: "/pages/notice/detail",
          params: item,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.noticeListBox {
  padding: 30rpx;

  .noticeListItem {
    margin-bottom: 50rpx;

    .time {
      text-align: center;

      text {
        background-color: #ccc;
        color: #fff;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
        border-radius: 5rpx;
      }
    }

    .itemBox {
      background-color: #fff;
      margin-top: 20rpx;
      padding-top: 30rpx;

      .title {
        padding: 0 30rpx;
        font-size: 32rpx;
        font-weight: bold;
      }

      .brief {
        font-size: 28rpx;
        color: #999;
        padding: 40rpx 30rpx;
      }

      .viewDetail {
        height: 100rpx;
        padding: 0 30rpx;
      }
    }

    .readed {
      background: #ccc;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      display: block;
      width: 70rpx;
      text-align: center;
      line-height: 36rpx;
    }

    .unread {
      background-color: #fb4535;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      display: block;
      width: 70rpx;
      text-align: center;
      line-height: 36rpx;
    }
  }
}
</style>
